<template>
  <view class="upload-page">
    <!-- 顶部标题栏 -->
    <view class="page-header">
      <text class="header-title">资源上传中心</text>
      <text class="header-desc">规范上传流程，高效管理资源</text>
    </view>

    <!-- 步骤导航栏 -->
    <view class="step-nav">
      <view 
        class="step-item" 
        :class="{ active: currentStep === 0 }"
        @click="currentStep = 0"
      >
        <view class="step-num">1</view>
        <view class="step-label">经验专区</view>
      </view>
      <view 
        class="step-item" 
        :class="{ active: currentStep === 1 }"
        @click="currentStep = 1"
      >
        <view class="step-num">2</view>
        <view class="step-label">上传规范</view>
      </view>
      <view 
        class="step-item" 
        :class="{ active: currentStep === 2 }"
        @click="currentStep = 2"
      >
        <view class="step-num">3</view>
        <view class="step-label">积分规则</view>
      </view>
      <view 
        class="step-item" 
        :class="{ active: currentStep === 3 }"
        @click="currentStep = 3"
      >
        <view class="step-num">4</view>
        <view class="step-label">提交确认</view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-wrapper">
      <!-- 1. 经验专区 -->
      <view class="content-card" v-show="currentStep === 0">
        <view class="card-title">经验分享 · 提升上传质量</view>
        <view class="tip-list">
          <view class="tip-item">
            <view class="tip-icon">✨</view>
            <view class="tip-text">标题突出“获得感”，让用户一眼看到价值</view>
          </view>
          <view class="tip-item">
            <view class="tip-icon">📝</view>
            <view class="tip-text">内容拆解为“步骤式”说明，降低理解成本</view>
          </view>
          <view class="tip-item">
            <view class="tip-icon">💬</view>
            <view class="tip-text">增加互动设计，比如“你是否遇到过这样的问题？”</view>
          </view>
          <view class="tip-item">
            <view class="tip-icon">🚀</view>
            <view class="tip-text">上传状态实时反馈（加载动画、成功提示），提升用户感知</view>
          </view>
        </view>
      </view>

      <!-- 2. 上传规范 -->
      <view class="content-card" v-show="currentStep === 1">
        <view class="card-title">核心规范 · 资源上传要求</view>
        
        <view class="spec-group">
          <view class="spec-title">A. 文件上传区</view>
          <view class="spec-item">
            <view class="spec-label">文件格式：</view>
            <view class="spec-value">仅支持 pdf、doc、ppt 格式</view>
          </view>
          <view class="spec-item">
            <view class="spec-label">大小限制：</view>
            <view class="spec-value">≤ 50M</view>
          </view>
          <view class="spec-item">
            <view class="spec-label">上传提示：</view>
            <view class="spec-value">超过阈值将无法上传，请压缩后重试</view>
          </view>
        </view>

        <view class="spec-group">
          <view class="spec-title">B. 资源基本信息</view>
          <view class="spec-item">
            <view class="spec-label">资源名称：</view>
            <view class="spec-value">请输入精准名称（如“高中数学必修一函数知识点总结”）</view>
          </view>
          <view class="spec-item">
            <view class="spec-label">资源简介：</view>
            <view class="spec-value">突出多维度价值（如“考点覆盖、解题技巧、易错点提醒”）</view>
          </view>
          <view class="spec-item">
            <view class="spec-label">资源类型：</view>
            <view class="spec-value">
              <picker mode="selector" range="{{typeList}}" range-key="name">
                <view class="picker">请选择类型</view>
              </picker>
            </view>
          </view>
        </view>

        <view class="spec-group">
          <view class="spec-title">C. 关联信息</view>
          <view class="spec-item">
            <view class="spec-label">所属专业：</view>
            <view class="spec-value">
              <picker mode="selector" range="{{majorList}}" range-key="name">
                <view class="picker">请选择专业</view>
              </picker>
            </view>
          </view>
          <view class="spec-item">
            <view class="spec-label">关联课程：</view>
            <view class="spec-value">
              <picker mode="selector" range="{{courseList}}" range-key="name">
                <view class="picker">请选择课程</view>
              </picker>
            </view>
          </view>
        </view>
      </view>

      <!-- 3. 积分规则 -->
      <view class="content-card" v-show="currentStep === 2">
        <view class="card-title">积分规则 · 贡献奖励说明</view>
        <view class="rule-list">
          <view class="rule-item">
            <view class="rule-score">+20</view>
            <view class="rule-desc">上传原创优质资源（经审核通过）</view>
          </view>
          <view class="rule-item">
            <view class="rule-score">+10</view>
            <view class="rule-desc">资源被其他用户下载≥10次</view>
          </view>
          <view class="rule-item">
            <view class="rule-score">+5</view>
            <view class="rule-desc">资源获得用户好评（五星评价≥3条）</view>
          </view>
          <view class="rule-item">
            <view class="rule-score">-5</view>
            <view class="rule-desc">上传违规资源（重复、低质、侵权等）</view>
          </view>
        </view>
      </view>

      <!-- 4. 提交确认 -->
      <view class="content-card" v-show="currentStep === 3">
        <view class="card-title">提交确认 · 办议复述与反馈</view>
        <view class="confirm-item">
          <view class="confirm-label">办议复述：</view>
          <textarea class="confirm-input" placeholder="请简要复述您的上传意图和资源价值..." />
        </view>
        <view class="confirm-item">
          <button class="submit-btn" @click="handleSubmit">确认提交</button>
        </view>
        <view class="feedback-tip" v-show="showFeedback">
          {{ feedbackText }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 0, // 当前步骤
      typeList: [
        { name: "知识点总结" },
        { name: "习题集" },
        { name: "教学课件" },
        { name: "拓展资料" }
      ],
      majorList: [
        { name: "数学" },
        { name: "物理" },
        { name: "化学" },
        { name: "语文" }
      ],
      courseList: [
        { name: "必修一" },
        { name: "必修二" },
        { name: "选修一" },
        { name: "选修二" }
      ],
      showFeedback: false,
      feedbackText: ""
    };
  },
  methods: {
    handleSubmit() {
      this.feedbackText = "提交成功！您的资源将进入审核流程，预计1-3个工作日完成审核。";
      this.showFeedback = true;
      // 实际项目中可添加接口请求逻辑
    }
  }
};
</script>

<style scoped>
.upload-page {
  background-color: #f9fafb;
  min-height: 100vh;
  padding: 20rpx;
  box-sizing: border-box;
}

.page-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.header-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.header-desc {
  font-size: 28rpx;
  color: #666;
  opacity: 0.8;
}

.step-nav {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx 0;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}

.step-num {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #e5e7eb;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.step-label {
  font-size: 24rpx;
  color: #666;
}

.step-item.active .step-num {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}

.step-item.active .step-label {
  color: #333;
  font-weight: 500;
}

.content-wrapper {
  min-height: 600rpx;
}

.content-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 30rpx;
}

.card-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #eee;
}

.tip-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.tip-item {
  display: flex;
  align-items: flex-start;
}

.tip-icon {
  font-size: 32rpx;
  color: #6366f1;
  margin-right: 16rpx;
  min-width: 32rpx;
}

.tip-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.spec-group {
  margin-bottom: 30rpx;
}

.spec-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 16rpx;
}

.spec-item {
  display: flex;
  margin-bottom: 16rpx;
  align-items: center;
}

.spec-label {
  font-size: 28rpx;
  color: #666;
  width: 140rpx;
}

.spec-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.picker {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.rule-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.rule-item {
  display: flex;
  align-items: center;
  padding: 16rpx;
  background-color: #f9fafb;
  border-radius: 8rpx;
}

.rule-score {
  font-size: 32rpx;
  font-weight: bold;
  color: #ef4444;
  width: 80rpx;
}

.rule-desc {
  font-size: 28rpx;
  color: #666;
  flex: 1;
}

.confirm-item {
  margin-bottom: 20rpx;
}

.confirm-label {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
}

.confirm-input {
  width: 100%;
  min-height: 120rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 16rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
}

.feedback-tip {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #10b981;
  text-align: center;
}
</style>